<template>
  <view class="customer-page" style="padding-bottom: 100rpx;">
    <!-- 搜索 / 新增 -->
    <view class="top-bar">
      <view class="search-section">
        <input v-model="keyword" class="search-input" placeholder="搜索客户/公司/工程" @confirm="onSearch" />
        <button class="search-btn" @click="onSearch">搜索</button>
      </view>
      <button class="add-btn" @click="goForm()">+ 新增</button>
    </view>

    <!-- 客户列表 -->
    <view class="status-tabs">
      <view
        v-for="tab in statusTabs"
        :key="tab.value"
        :class="['tab', { active: statusTab === tab.value }]"
        @click="onTabChange(tab.value)"
      >
        {{ tab.label }}
      </view>
    </view>

    <scroll-view 
      scroll-y 
      class="list-area" 
      v-if="filteredListByKeyword.length"
      refresher-enabled="true"
      :refresher-triggered="refreshing"
      @refresherrefresh="onRefresh"
    >
      <view class="customer-card" v-for="item in filteredListByKeyword" :key="item.id" @click="goForm(item.id, item)">
        <view class="row between">
          <text class="name">{{ item.project_name }}</text>
          <text class="status" :class="{ 'signed': item.status === '已签约', 'error': item.status === '异常' }">{{ item.status }}</text>
        </view>
        <view class="row between">
          <text class="label">客户公司：</text>
          <text class="value">{{ item.customer_company_name || '未设置' }}</text>
        </view>
        <view class="row between">
          <text class="label">负责人：</text>
          <text class="value">{{ item.site_manager || '未设置' }}</text>
        </view>
        <view class="row between">
          <text class="label">销售人员：</text>
          <text class="value">{{ item.sales_name || item.salesPerson || item.user_name || item.userName || '未设置' }}</text>
        </view>
        <view class="row between">
          <text class="label">负责人电话：</text>
          <text class="value">{{ item.site_manager_phone || '未设置' }}</text>
        </view>
        
        <!-- 收款情况 -->
        <view class="payment-info">
          <view class="payment-title">收款情况</view>
          <view class="payment-row">
            <text class="payment-label">结算金额：</text>
            <text class="payment-value">¥{{ formatAmount(item.settlement_amount || item.settlementAmount || 0) }}</text>
          </view>
          <view class="payment-row">
            <text class="payment-label">实收金额：</text>
            <text class="payment-value received">¥{{ formatAmount(item.received_amount || item.receivedAmount || 0) }}</text>
          </view>
          <view class="payment-row">
            <text class="payment-label">未收金额：</text>
            <text class="payment-value unpaid">¥{{ formatAmount(getUnpaidAmount(item)) }}</text>
          </view>
          
          <!-- 收款进度条 -->
          <view class="payment-progress">
            <view class="progress-bar">
              <view 
                class="progress-fill" 
                :style="{ width: getPaymentProgress(item) + '%' }"
              ></view>
            </view>
            <text class="progress-text">{{ getPaymentProgress(item) }}%</text>
          </view>
        </view>
        <view class="actions" @click.stop>
          <button class="action-btn" @click="visit(item)">拜访</button>
          <button class="action-btn" @click="goFollow(item)">跟进记录</button>
          <button class="action-btn" @click="sign(item)" v-if="item.status === '待签约'">签约</button>
          <button
            class="action-btn danger"
            @click="del(item)"
            v-if="item.status !== '已签约'"
          >
            删除
          </button>
        </view>
      </view>
    </scroll-view>

    <view class="empty" v-else>
      <image src="/static/empty.png" class="empty-img" />
      <text class="empty-text">暂无客户，请点击新增</text>
    </view>

    <!-- 签约弹窗 -->
    <view v-if="showSignModal" class="modal-mask">
      <view class="modal-container">
        <view class="modal-header">
          <text>选择财务人员</text>
        </view>
        <view class="modal-body">
          <picker mode="selector" :range="financeList" :value="signFinanceIndex" @change="onFinanceChange">
            <view class="picker">{{ financeList[signFinanceIndex] || '请选择财务人员' }}</view>
          </picker>
        </view>
        <view class="modal-footer">
          <button class="btn cancel" @click="closeSignModal">取消</button>
          <button class="btn submit" @click="submitSign">确定签约</button>
        </view>
      </view>
    </view>

    <!-- 拜访弹窗 -->
    <view v-if="visitModalVisible" class="modal-mask">
      <view class="modal-container">
        <view class="modal-header">拜访登记</view>
        <view class="modal-body">
          <!-- 拜访形式选择器 -->
          <picker :range="visitTypes" @change="handleVisitTypeChange">
            <view class="picker">拜访形式：{{ visitForm.type }}</view>
          </picker>

          <!-- 拜访内容输入 -->
          <textarea
            class="visit-textarea"
            placeholder="请输入拜访内容"
            v-model="visitForm.content"
            @input="handleVisitContentInput"
          />

          <!-- 只有线下才显示图片上传 -->
          <view class="visit-images" v-if="visitForm.type === '线下'">
            <view v-for="(img, idx) in visitForm.images" :key="idx" class="visit-img-wrap">
              <image :src="img" class="visit-img" />
              <text class="remove-img" @click="removeVisitImage(idx)">×</text>
            </view>
            <view class="add-img" @click="handleImageUpload">+</view>
          </view>
        </view>
        <view class="modal-footer">
          <button class="btn cancel" @click="closeVisitModal">取消</button>
          <button class="btn submit" @click="submitVisit">提交</button>
        </view>
      </view>
    </view>
    <custom-tabbar :current="tabIndex" :tabList="tabList" />
  </view>
</template>

<script>
import { getProjectList, getFollowProjectList, getAddress, uploadImage, followProject, delProject, getFinanceList, editProject } from '@/api/sale/customer.js'
import { getTabListByRole } from '@/utils/tabberList.js'
import CustomTabbar from '@/components/custom-tabbar/CustomTabbar.vue'

export default {
  components: { CustomTabbar },
  data() {
    return {
      keyword: '',
      refreshing: false, // 下拉刷新状态
      financeList: ['张会计', '李会计', '赵会计'],
      financeData: [], // 保存完整的财务人员数据
      filteredList: [
        // {
        //   id: 1,
        //   clientName: '南方建材',
        //   projectName: '高新区写字楼项目',
        //   principalPhone: '138****8888',
        //   level: 'A',
        //   followStatus: '跟进中',
        //   productionAmount: 300,
        //   productionUnit: 'm³',
        // },
        // {
        //   id: 2,
        //   clientName: '中铁八局',
        //   projectName: '地铁三号线',
        //   principalPhone: '139****7777',
        //   level: 'B',
        //   followStatus: '已签约',
        //   productionAmount: 1200,
        //   productionUnit: 'm³',
        // },
      ],

      // 签约弹窗相关
      showSignModal: false,
      signFinanceIndex: 0,
      currentSignItem: null,
      statusTab: 0, // 当前选中的tab，默认0
      statusTabs: [
        { label: '全部', value: 0 },
        { label: '待签约', value: 1 },
        { label: '已签约', value: 2 },
        { label: '异常', value: 3 }
      ],

      // 拜访弹窗相关
      visitModalVisible: false,
      visitForm: {
        type: '线上', // 默认
        content: '',
        images: [],
        longitude: '',
        latitude: '',
        addressInfo: ''
      },
      visitTypes: ['线上', '线下'],
      currentVisitItem: null,
      visitList: [], // 拜访记录列表
      tabList: [],
      tabIndex: 0
    };
  },
  onLoad() {
    // 登录后或页面onLoad时
    const role = uni.getStorageSync('user-role');
    // 保留自定义tabBar逻辑
    this.tabList = getTabListByRole(role);
    // 设置tabIndex等逻辑
    // 注意：不在onLoad中调用fetchProjectList，避免与onShow重复调用
  },
  onShow() {
    const role = uni.getStorageSync('user-role');
    this.tabList = getTabListByRole(role);
    // 获取当前页面路径
    let currentPath = '';
    const pages = getCurrentPages();
    if (pages.length) {
      currentPath = pages[pages.length - 1].route || pages[pages.length - 1].__route__ || '';
    }
    this.tabIndex = this.tabList.findIndex(item => item.pagePath === currentPath);
    // 每次显示页面时刷新列表
    this.fetchProjectList();
  },
  computed: {
    // 根据关键词过滤列表
    filteredListByKeyword() {
      const arr = Array.isArray(this.filteredList) ? this.filteredList : [];
      return arr.filter(item => {
        const matchKeyword =
          !this.keyword ||
          item.customer_name?.includes(this.keyword) ||
          item.project_name?.includes(this.keyword) ||
          item.customer_company_name?.includes(this.keyword);
        
        // 根据当前选中的tab筛选状态
        let matchStatus = true;
        if (this.statusTab === 0) {
          // 全部：显示所有项目
          matchStatus = true;
        } else if (this.statusTab === 1) {
          // 待签约：显示待签约的项目
          matchStatus = item.status === '待签约';
        } else if (this.statusTab === 2) {
          // 已签约：显示已签约的项目
          matchStatus = item.status === '已签约';
        } else if (this.statusTab === 3) {
          // 异常：显示异常状态的项目
          matchStatus = item.status === '异常';
        }
        
        return matchKeyword && matchStatus;
      });
    },
  },
  methods: {
    async onTabChange(val) {
      this.statusTab = val;
      await this.fetchProjectList();
    },
    
    // 搜索方法
    async onSearch() {
      await this.fetchProjectList();
    },
    async fetchProjectList() {
      try {
        // 从本地缓存获取用户信息和角色
        const userInfo = uni.getStorageSync('user-info');
        const userRole = uni.getStorageSync('user-role');
        const userId = userInfo?.userinfo?.id || userInfo?.id;
        
        if (!userId) {
          uni.showToast({ title: '用户信息获取失败', icon: 'none' });
          return;
        }
        
        // 根据状态筛选传递对应的status值
        let status = '';
        if (this.statusTab === 0) {
          status = ''; // 全部，传空字符串
        } else if (this.statusTab === 1) {
          status = '待签约'; // 待签约
        } else if (this.statusTab === 2) {
          status = '已签约'; // 已签约
        } else if (this.statusTab === 3) {
          status = '异常'; // 异常
        }
        
        // 构建请求参数
        const params = {
          page: 1,
          status: status,
          keyword: this.keyword.trim() // 添加搜索关键词
        };
        
        // 经理端(role=4)不传user_id参数
        if (userRole !== 4) {
          params.user_id = userId;
        }
        
        const result = await getProjectList(params);
       
        if (result.code === 1) {
          this.filteredList = Array.isArray(result.data.list) ? result.data.list : [];
          
        } else {
          uni.showToast({ title: result.msg || '获取项目列表失败', icon: 'none' });
        }
      } catch (error) {
        uni.showToast({
          title: '获取项目列表失败，请重试',
          icon: 'none'
        });
      }
    },
    // 下拉刷新
    async onRefresh() {
      this.refreshing = true;
      try {
        await this.fetchProjectList();
        uni.showToast({
          title: '刷新成功',
          icon: 'success',
          duration: 1000
        });
      } catch (error) {
        uni.showToast({
          title: '刷新失败',
          icon: 'none',
          duration: 1000
        });
      } finally {
        this.refreshing = false;
      }
    },
    goForm(id, item) {
      if (id) {
        // 编辑时传递完整数据
        uni.navigateTo({
          url: `/pages/sales/form?id=${id}&data=${encodeURIComponent(JSON.stringify(item))}`
        });
      } else {
        // 新增时只传递id
        uni.navigateTo({
          url: '/pages/sales/form'
        });
      }
    },
    async visit(item) {
      this.currentVisitItem = item;
      this.visitForm = { type: '线上', content: '', images: [], longitude: '', latitude: '', addressInfo: '' };
      this.visitModalVisible = true;
      // await this.fetchVisitList(item.id); // 不再请求拜访信息列表

      console.log('开始获取定位...');
      uni.getLocation({
        type: 'wgs84',
        success: async (res) => {
          console.log('定位成功', res);
          const longitude = res.longitude;
          const latitude = res.latitude;
          // 先赋值经纬度
          this.visitForm.longitude = longitude;
          this.visitForm.latitude = latitude;
          try {
            const addressRes = await getAddress({ longitude, latitude });
            console.log('getAddress接口返回的完整数据:', addressRes);
            
            // 根据接口返回的数据结构，提取formatted_address
            let address = '未知地址';
            if (addressRes.data && addressRes.data.result) {
              if (addressRes.data.result.formatted_address) {
                address = addressRes.data.result.formatted_address;
                console.log('成功提取formatted_address:', address);
              } else if (addressRes.data.result.address) {
                address = addressRes.data.result.address;
                console.log('使用备用address字段:', address);
              }
            }
            
            // 确保address是字符串，不是对象
            if (typeof address === 'object') {
              console.warn('address是对象，转换为字符串:', address);
              address = JSON.stringify(address);
            }
            
            this.visitForm.addressInfo = address;
            console.log('最终设置的addressInfo:', this.visitForm.addressInfo);
          } catch (e) {
            console.log('地址解析失败', e);
            uni.showToast({ title: '获取地址失败', icon: 'none' });
          }
        },
        fail: (err) => {
          console.log('定位失败', err);
          uni.showModal({
            title: '定位失败',
            content: '需要获取您的位置信息用于拜访登记，请在设置中开启定位权限。',
            confirmText: '去设置',
            success: (res) => {
              if (res.confirm) {
                uni.openSetting({});
              }
            }
          });
        }
      });
    },
    closeVisitModal() {
      this.visitModalVisible = false;
      this.currentVisitItem = null;
    },
    handleVisitTypeChange(e) {
      this.visitForm.type = this.visitTypes[e.detail.value];
    },
    handleVisitContentInput(e) {
      this.visitForm.content = e.detail.value;
    },
    async handleImageUpload() {
      const res = await uni.chooseImage({ count: 9, sizeType: ['compressed'] });
      if (res && res.tempFilePaths) {
        uni.showLoading({ title: '上传中...' });
        try {
          // 上传所有图片，返回 fullurl 数组
          const uploadPromises = res.tempFilePaths.map(path => uploadImage(path));
          const urls = await Promise.all(uploadPromises);
          this.visitForm.images = this.visitForm.images.concat(urls);
        } catch (e) {
          uni.showToast({ title: e || '图片上传失败', icon: 'none' });
        } finally {
          uni.hideLoading();
        }
      }
    },
    removeVisitImage(idx) {
      this.visitForm.images.splice(idx, 1);
    },
    getTypeOfVisit(type) {
      return type === '线上' ? '1' : '2';
    },
    async submitVisit() {
      if (this.visitForm.type === '线下' && (!this.visitForm.images || this.visitForm.images.length === 0)) {
        uni.showToast({ title: '请上传拜访图片', icon: 'none' });
        return;
      }
      
      const params = {
        id: this.currentVisitItem.id,
        type: '3', // 固定为拜访
        remark: this.visitForm.content,
        image: this.visitForm.images.join(','), // 图片用逗号拼接
        type_ofVisit: this.getTypeOfVisit(this.visitForm.type), // 1线上 2线下
        address: this.visitForm.addressInfo // 访问地址
      };
      
      try {
        const res = await followProject(params);
        if (res.code === 1) {
          uni.showToast({ title: '拜访信息已提交', icon: 'success' });
          this.closeVisitModal();
          // 刷新列表
          await this.fetchProjectList();
        } else {
          uni.showToast({ title: res.msg || '提交失败', icon: 'none' });
        }
      } catch (e) {
        uni.showToast({ title: '提交失败，请重试', icon: 'none' });
      }
    },
    async sign(item) {
      this.currentSignItem = item;
      this.signFinanceIndex = 0;
      
      try {
        // 获取财务人员列表
        const res = await getFinanceList();
        if (res.code === 1 && res.data && res.data.length > 0) {
          this.financeList = res.data.map(item => item.nickname || item.name || item);
          // 保存完整的财务人员数据，包含id
          this.financeData = res.data;
          // 确保索引在有效范围内
          if (this.signFinanceIndex >= this.financeList.length) {
            this.signFinanceIndex = 0;
          }
        } else {
          // 如果接口失败，使用默认数据
          this.financeList = ['张会计', '李会计', '赵会计'];
          this.financeData = [];
          this.signFinanceIndex = 0;
        }
      } catch (error) {
        console.error('获取财务人员列表失败:', error);
        // 使用默认数据
        this.financeList = ['张会计', '李会计', '赵会计'];
        this.financeData = [];
        this.signFinanceIndex = 0;
      }
      
      this.showSignModal = true;
    },
    closeSignModal() {
      this.showSignModal = false;
      this.currentSignItem = null;
    },
    
    // 处理财务人员选择变化
    onFinanceChange(e) {
      this.signFinanceIndex = e.detail.value;
      console.log('选择的财务人员索引:', this.signFinanceIndex);
      console.log('选择的财务人员:', this.financeList[this.signFinanceIndex]);
    },
    async submitSign() {
      const item = this.currentSignItem;
      const selectedFinance = this.financeData[this.signFinanceIndex];
      const financeName = this.financeList[this.signFinanceIndex];
      const financeId = selectedFinance ? selectedFinance.id : null;
      
      try {
        // 调用编辑项目接口，传递财务人员id和项目id
        const res = await editProject({
          id: item.id,
          finance_id: financeId
        });
        
        if (res.code === 1) {
          item.followStatus = '已签约';
          item.financePerson = financeName;
          item.financeId = financeId;
          
          uni.showToast({ title: `已签约并指派给 ${financeName}`, icon: 'success' });
          this.closeSignModal();
          
          // 刷新列表
          await this.fetchProjectList();
        } else {
          uni.showToast({ title: res.msg || '签约失败', icon: 'none' });
        }
      } catch (error) {
        console.error('签约失败:', error);
        uni.showToast({ title: '签约失败，请重试', icon: 'none' });
      }
    },
    async del(item) {
      if (item.followStatus === '已签约') {
        uni.showToast({ title: '已签约客户不可删除', icon: 'none' });
        return;
      }
      try {
        await delProject({ id: item.id });
        uni.showToast({ title: '删除成功', icon: 'success' });
        // 删除成功后刷新列表
        await this.fetchProjectList();
      } catch (error) {
        uni.showToast({ title: '删除失败', icon: 'none' });
      }
    },
    // 获取拜访记录列表
    async fetchVisitList(projectId) {
      try {
        const res = await getFollowProjectList({ project_id: projectId });
        if (res.code === 1) {
          this.visitList = Array.isArray(res.data?.list) ? res.data.list : [];
        } else {
          uni.showToast({ title: res.msg || '获取拜访记录失败', icon: 'none' });
        }
      } catch (error) {
        uni.showToast({ title: '获取拜访记录失败，请重试', icon: 'none' });
      }
    },
    
    // 跳转到跟进记录页面
    goFollow(item) {
      uni.navigateTo({
        url: `/pages/sales/follow?id=${item.id}&customerName=${encodeURIComponent(item.customer_name)}`
      });
    },
    formatAmount(value) {
      if (value === null || value === undefined) {
        return '0.00';
      }
      const num = parseFloat(value);
      if (isNaN(num)) {
        return '0.00';
      }
      return num.toFixed(2);
    },
    getUnpaidAmount(item) {
      const settlementAmount = item.settlement_amount || item.settlementAmount || 0;
      const receivedAmount = item.received_amount || item.receivedAmount || 0;
      return settlementAmount - receivedAmount;
    },
    getPaymentProgress(item) {
      const settlementAmount = item.settlement_amount || item.settlementAmount || 0;
      const receivedAmount = item.received_amount || item.receivedAmount || 0;
      if (settlementAmount === 0) {
        return 0;
      }
      return (receivedAmount / settlementAmount) * 100;
    }
  },
};
</script>

<style lang="scss" scoped>
.customer-page {
  min-height: 100vh;
  background: #f5f6fa;
  padding-bottom: 20rpx;
}
.top-bar {
  display: flex;
  align-items: center;
  padding: 15rpx 30rpx;
  
  .search-section {
    flex: 1;
    display: flex;
    align-items: center;
    margin-right: 20rpx;
    
    .search-input {
      flex: 1;
      height: 60rpx;
      border-radius: 12rpx;
      background: #fff;
      padding: 0 20rpx;
      font-size: 28rpx;
      margin-right: 12rpx;
    }
    
    .search-btn {
      width: 120rpx;
      height: 60rpx;
      line-height: 60rpx;
      font-size: 28rpx;
      border-radius: 12rpx;
      background: #52c41a;
      color: #fff;
      text-align: center;
    }
  }
  
  .add-btn {
    width: 160rpx;
    height: 60rpx;
    line-height: 60rpx;
    font-size: 28rpx;
    border-radius: 12rpx;
    background: #409eff;
    color: #fff;
  }
}
.status-tabs {
  display: flex;
  margin: 0 30rpx 15rpx 30rpx;
  .tab {
    flex: 1;
    text-align: center;
    padding: 12rpx 0;
    font-size: 28rpx;
    color: #666;
    border-bottom: 4rpx solid transparent;
    transition: all 0.2s;
    &.active {
      color: #409eff;
      border-bottom: 4rpx solid #409eff;
      font-weight: bold;
    }
  }
}
.list-area {
  max-height: calc(100vh - 120rpx);
}
.customer-card {
  background: #fff;
  border-radius: 16rpx;
  margin: 15rpx 30rpx;
  padding: 20rpx;
  box-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.05);
  .row {
    display: flex;
    font-size: 26rpx;
    color: #555;
    margin-bottom: 8rpx;
    &.between {
      justify-content: space-between;
    }
  }
  .name {
    font-size: 30rpx;
    font-weight: bold;
    color: #222;
  }
  .level {
    color: #409eff;
    font-weight: 500;
  }
  .status {
    color: #fa8c16;
    font-weight: 500;
    
    &.signed {
      color: #52c41a; // 已签约状态显示绿色
    }
    
    &.error {
      color: #ff4d4f; // 异常状态显示红色
    }
  }
  .prod {
    color: #999;
    font-size: 24rpx;
  }
  .actions {
    display: flex;
    justify-content: space-between;
    margin-top: 15rpx;
    gap: 12rpx;
    .action-btn {
      flex: 1;
      height: 50rpx;
      font-size: 24rpx;
      border-radius: 8rpx;
      background: #e9ebf1;
      color: #333;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      display: flex;
      align-items: center;
      justify-content: center;
      line-height: 1;
      &:last-child {
        margin-right: 0;
      }
      &.danger {
        background: #ff4d4f;
        color: #fff;
      }
    }
  }
}
.empty {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: calc(100vh - 300rpx);
  padding: 100rpx;
  text-align: center;
  .empty-img {
    width: 200rpx;
    height: 200rpx;
    margin-bottom: 20rpx;
  }
  .empty-text {
    font-size: 28rpx;
    color: #999;
  }
}

/* 弹窗样式 */
.modal-mask {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background-color: rgba(0,0,0,0.4);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}
.modal-container {
  width: 90%;
  background: #fff;
  border-radius: 16rpx;
  overflow: hidden;
  padding: 30rpx;
  box-sizing: border-box;
}
.modal-header {
  font-size: 32rpx;
  font-weight: bold;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.modal-body {
  margin-top: 20rpx;
}
.picker {
  height: 60rpx;
  line-height: 60rpx;
  border: 1rpx solid #ccc;
  border-radius: 8rpx;
  padding: 0 20rpx;
  font-size: 28rpx;
  color: #333;
  margin-bottom: 20rpx;
}
.modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 20rpx;
}
.btn {
  height: 60rpx;
  line-height: 60rpx;
  border-radius: 12rpx;
  font-size: 28rpx;
  padding: 0 40rpx;
  border: none;
}
.cancel {
  background: #f5f6fa;
  color: #666;
}
.submit {
  background: #409eff;
  color: #fff;
}
.visit-textarea {
  width: 100%;
  min-height: 120rpx;
  border: 1rpx solid #ccc;
  border-radius: 8rpx;
  padding: 16rpx;
  font-size: 28rpx;
  margin: 20rpx 0;
}
.visit-images {
  display: flex;
  flex-wrap: wrap;
  gap: 16rpx;
  margin-bottom: 20rpx;
  .visit-img-wrap {
    position: relative;
    .visit-img {
      width: 120rpx;
      height: 120rpx;
      border-radius: 8rpx;
    }
    .remove-img {
      position: absolute;
      top: -10rpx;
      right: -10rpx;
      background: #ff4d4f;
      color: #fff;
      border-radius: 50%;
      width: 32rpx;
      height: 32rpx;
      text-align: center;
      line-height: 32rpx;
      font-size: 24rpx;
    }
  }
  .add-img {
    width: 120rpx;
    height: 120rpx;
    background: #f5f5f5;
    color: #bbb;
    font-size: 60rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8rpx;
    cursor: pointer;
  }
}
.visit-address {
  margin-top: 20rpx;
  padding: 16rpx;
  background: #f5f5f5;
  border-radius: 8rpx;
  font-size: 26rpx;
  color: #333;
}
.payment-info {
  margin-top: 15rpx;
  padding: 15rpx;
  background: #f5f5f5;
  border-radius: 8rpx;
  .payment-title {
    font-size: 28rpx;
    font-weight: bold;
    color: #333;
    margin-bottom: 10rpx;
    padding-bottom: 10rpx;
    border-bottom: 1rpx solid #eee;
  }
  .payment-row {
    display: flex;
    justify-content: space-between;
    font-size: 26rpx;
    color: #555;
    margin-bottom: 5rpx;
    .payment-label {
      font-weight: 500;
    }
    .payment-value {
      font-weight: 500;
      color: #fa8c16;
      &.received {
        color: #52c41a;
      }
      &.unpaid {
        color: #ff4d4f;
      }
    }
  }
}
.payment-progress {
  margin-top: 10rpx;
  .progress-bar {
    height: 10rpx;
    background-color: #e0e0e0;
    border-radius: 5rpx;
    overflow: hidden;
    .progress-fill {
      height: 100%;
      background: #409eff;
      border-radius: 5rpx;
    }
  }
  .progress-text {
    font-size: 24rpx;
    color: #666;
    text-align: right;
    margin-top: 8rpx;
  }
}
</style>
